<template>
  <div class="w-h-full">
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>

    <div v-resize="resizeHandle" style="width: 100%; height: 100%;">
      <div :id="'chart-'+component.id+'-'+chartDomNum" class="w-h-full"></div>
    </div>
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import ChartCompMixin from '@/mixin/ChartCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  import 'echarts/extension/bmap/bmap'

  const _this = {
    name: 'BaiduMapChart', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompMixin, ChartCompMixin],
    attr: {
      version: '1.0',
      configDataTemp: Object.assign({

        // 组件相关配置属性，Echarts图表组件的相关配置属性，必须在chartOption对象下定义
        chartOption: {}

      }, PnDesigner.buildFuncCompDatasourceField({ // 如果组件需要配置数据源，则需要调用此函数构建数据源字段对象
        ds_resultObjTemplate: [
          {
            field: 'value',
            remark: '内容'
          }
        ],
        ds_resultObj: [
          {
            "value": "我是组件内容"
          }
        ],
        ds_useFilter: true, // 是否使用过滤器，默认不使用
        ds_useTimer: true, // 是否开启定时器配置，默认不开启
      }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildEchartCompCustomOption())
    },
    data() {
      return {
        mapModel: null
      }
    },
    mounted() {
      this.init();

      this.setTimer(() => { //定时器，如果当前组件不使用定时器，可以将此段代码删除
        this.init()
      })
    },
    methods: {
      init() { // 组价初始化函数，函数名必须使用init，不可更改
        this.initDatasource(() => {
          this.chart.setOption(this.chartOption);
          // this.mapModel = this.chart.getModel().getComponent('bmap').getBMap();
          // this.mapModel.addControl(new BMap.MapTypeControl());
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode()
        }, (result) => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode()
        });
      }
    },
    computed: {
      chartOption() {

        let option = {
          tooltip: {
            trigger: 'item'
          },
          bmap: {
            center: [104.114129, 37.550339],
            zoom: 5,
            roam: true,
            mapStyle: {
              styleJson: [
                {
                  'featureType': 'water',
                  'elementType': 'all',
                  'stylers': {
                    'color': '#d1d1d1'
                  }
                }, {
                  'featureType': 'land',
                  'elementType': 'all',
                  'stylers': {
                    'color': '#f3f3f3'
                  }
                }, {
                  'featureType': 'railway',
                  'elementType': 'all',
                  'stylers': {
                    'visibility': 'off'
                  }
                }, {
                  'featureType': 'highway',
                  'elementType': 'all',
                  'stylers': {
                    'color': '#fdfdfd'
                  }
                }, {
                  'featureType': 'highway',
                  'elementType': 'labels',
                  'stylers': {
                    'visibility': 'off'
                  }
                }, {
                  'featureType': 'arterial',
                  'elementType': 'geometry',
                  'stylers': {
                    'color': '#fefefe'
                  }
                }, {
                  'featureType': 'arterial',
                  'elementType': 'geometry.fill',
                  'stylers': {
                    'color': '#fefefe'
                  }
                }, {
                  'featureType': 'poi',
                  'elementType': 'all',
                  'stylers': {
                    'visibility': 'off'
                  }
                }, {
                  'featureType': 'green',
                  'elementType': 'all',
                  'stylers': {
                    'visibility': 'off'
                  }
                }, {
                  'featureType': 'subway',
                  'elementType': 'all',
                  'stylers': {
                    'visibility': 'off'
                  }
                }, {
                  'featureType': 'manmade',
                  'elementType': 'all',
                  'stylers': {
                    'color': '#d1d1d1'
                  }
                }, {
                  'featureType': 'local',
                  'elementType': 'all',
                  'stylers': {
                    'color': '#d1d1d1'
                  }
                }, {
                  'featureType': 'arterial',
                  'elementType': 'labels',
                  'stylers': {
                    'visibility': 'off'
                  }
                }, {
                  'featureType': 'boundary',
                  'elementType': 'all',
                  'stylers': {
                    'color': '#fefefe'
                  }
                }, {
                  'featureType': 'building',
                  'elementType': 'all',
                  'stylers': {
                    'color': '#d1d1d1'
                  }
                }, {
                  'featureType': 'label',
                  'elementType': 'labels.text.fill',
                  'stylers': {
                    'color': '#999999'
                  }
                }
              ]
            }
          },
          visualMap: {
            show: false,
            min: 0,
            max: 500,
            splitNumber: 5,
            inRange: {
              color: ['green', 'purple']
            },
          },
          series: [
            {
              type: 'heatmap',
              coordinateSystem: 'bmap',
              blurSize: 50
            },
            {
              name: 'pm2.5',
              type: 'scatter',
              coordinateSystem: 'bmap',
              data: [
                {
                  name: '澳门',
                  value: [121.15, 31.89, 100]
                }
              ],
              symbolSize: function (val) {
                return val[2] / 10;
              },
              encode: {
                value: 2
              },
              label: {
                formatter: '{b}',
                position: 'right',
                show: false
              },
              itemStyle: {
                color: 'purple'
              },
              emphasis: {
                label: {
                  show: true
                }
              }
            },

            // {
            //     name: 'Top 5',
            //     type: 'effectScatter',
            //     coordinateSystem: 'bmap',
            //     data: convertData(data.sort(function (a, b) {
            //         return b.value - a.value;
            //     }).slice(0, 6)),
            //     symbolSize: function (val) {
            //         return val[2] / 10;
            //     },
            //     encode: {
            //         value: 2
            //     },
            //     showEffectOn: 'render',
            //     rippleEffect: {
            //         brushType: 'stroke'
            //     },
            //     hoverAnimation: true,
            //     label: {
            //         formatter: '{b}',
            //         position: 'right',
            //         show: true
            //     },
            //     itemStyle: {
            //         color: 'purple',
            //         shadowBlur: 10,
            //         shadowColor: '#333'
            //     },
            //     zlevel: 1
            // }
          ]
        };

        return option;
      }
    }
  };

  export default _this
</script>

<style scoped>

</style>
